<template>
  <div class="hello">
      <el-form ref="form" :rules="formRules" :model="formData" label-width="100px">
          <el-form-item label="姓名" prop="name">
              <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
              <el-input v-model.number="formData.age"></el-input>
          </el-form-item>
          <el-form-item label="生日" prop="birthday">
              <el-date-picker v-model="formData.birthday" value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
              <el-select v-model="formData.address">
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.addressName"
                    :value="item.value"
                  >
                  </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
              <el-radio v-model="formData.sex" label="1">男</el-radio>
              <el-radio v-model="formData.sex" label="0">女</el-radio>
          </el-form-item>
          <el-form-item label="兴趣爱好" prop="hobbies">
              <el-checkbox-group v-model="formData.hobbies">
                  <el-checkbox label="1">篮球</el-checkbox>
                  <el-checkbox label="2">健身</el-checkbox>
                  <el-checkbox label="3">乒乓球</el-checkbox>
                  <el-checkbox label="4">跑步</el-checkbox>
              </el-checkbox-group>
          </el-form-item>
          <el-form-item>
              <el-button @click="reset">重置</el-button>
              <el-button @click="confirm">确定</el-button>
          </el-form-item>
      </el-form>

      {{formData}}
  </div>
</template>

<script>
// moment

export default {
  data () {
    return {
        formData: {
            name: '',
            age: '',
            birthday: '',
            remark: '',
            address: '',
            sex: '1',
            hobbies: []
        },
        options: [
            {addressName: '湖北', value: 'hb'},
            {addressName: '湖南', value: 'hn'},
            {addressName: '广东', value: 'gd'},
            {addressName: '江苏', value: 'js'},
            {addressName: '上海', value: 'sh'}
        ],
        formRules: {
            name: [
                {required: true, trigger: 'blur', message: '请输入姓名'}
            ],
            age: [
                {required: true, trigger: 'change', message: '请输入年龄'}
            ],
            birthday: [
                {required: true, trigger: 'change', message: '请选择生日'}
            ],
            remark: [
                {required: true, trigger: 'change', message: '请输入备注'}
            ],
            address: [
                {required: true, trigger: 'change', message: '请输入地址'}
            ],
            sex: [
                {required: true, trigger: 'change', message: '请选择性别'}
            ],
            hobbies: [
                {required: true, trigger: 'change', message: '请选择爱好'}
            ]
        }
    }
  },
  methods: {
      reset () {
          this.$refs.form.resetFields()
      },
      confirm () {
          this.$refs.form.validate(valid => {
              if (valid) {
                  console.log('校验通过');
              } else {
                  return false
              }
          })
      }
  }
}
</script>

<style scoped>

</style>